How to modify the look and feel of the Homepage

In this article I describe how to modify the look and feel of the Homepage for a domino Blog (based on dominoblog.ntf template)

The default look and feel of the dominoblog template looks like this in the browser:

Below I describe how to change this to the following look and feel:

So changes made to the home page are
1. Left column with Person card and Tag-cloud is removed and content is merged into the right column
2. Photo is added
3. Name next to the photo is removed
4. About me is added below the photo

Before we jump into the details let's have a look at how different content parts of domino blog are organised.

Domino Blog building blocks
Domino Blog works with templates for different content in this Article I will concentrate on the Template for a Site Page as this is the template used for the home page.
Templates are a mixture of standard HTML-code and specific instruction blocks; the <$DX-tags>. These DX-tags get replaced with content automatically. A list of all available DX-tags can be found here.
For styling of blocks DIV-tags in combination with CSS Style sheets are used. (For this article I will stick to the default style)

Step 1. Move Person card and Tag-cloud in left column to right column
In this step we move the person card and Tag-cloud blocks to the right column.
The setup for templates and blocks are accessible via Notes Client using the "advanced" item in the navigator pane.
The Homepage template is found under section "HTML Templates\Page Templates"

When looking at the content of this template we recognize the fore-mentioned building DX-blocks
The left column is implemented using the template building block named 'LeftSideBar'  (i.e. <$DXTemplateBlock Name="LeftSideBar"$> in the code) and the right column using the template block named 'RightSideBar' (i.e. <$DXTemplateBlock Name="RightSideBar"$> in the code)

So to change the content of these we need to look into these Template blocks, which are found in the view 'HTML Templates\Block Template'

Looking at the content of the Template 'LeftSideBar' we can recognize the various components shown in the left column; the place holder for the photo (i.e. , and the place holder for the tag-cloud "Tags"

Similar on the Template for 'RightSideBar' we can recognise the various components shown in the right column; 'Feeds' and 'Recent Comments'

With this we have an overview of what needs to go where.
Instead of modifying the original templates I choose to use copies of the original templates with their own name. This has the advantage that you can easily spot which component you have changed and provides a backup version with the original code for reference.
My modified templates are marked with a postfix 'MH',

As the Homepage Template references to the LeftSideBar and RightSideBar building blocks, references need to be changed in the HomePageMH Template as well

Finally the Blog needs to launch using the ' Home PageMH' template instead of the 'Home Page' template. This is accomplished using the Site Template Wizard in the configuration menu

Relaunch the blog in your browser and confirm that everything still looks exactly the same.



finally, here we go with the modifications:

To hide the left column I went for a short-cut, I simply hide the HTML-code for the left-column in the 'Home PageMH' Page Template

The result in the browser looks like this:

As a next step we need to copy out the appropriate code from the Block Template 'LeftSideBarMH' and pasted into the 'RightSideBarMH' Block Template
(basically everything except for outermost div with id 'colLeft')

To start with paste the code directly after the div-tag with id="colRight" in the 'RightSideBarMH' Block Template:

Save the template and refresh the blog template look in the browser. It should now look like this:

You may notice that the location of the Tag-Cloud is still wrong.
This is easily fixed by moving the content of div with id='tabSection' between the 'Recent Comments' and 'Archives' section (just before the div with class='lists' befor Archives)

Save the template and refresh the blog template look in the browser. It should now look like this:

This finalises step 1 "Move Person card and Tag-cloud in left column to right column"


Step 2. Add a photo in the Person Card
In the description above you may have noticed that the HTML code in Block Template 'RightSideBarMH' actually contains a reference to a photo. (sRc='../photo.gif')

What I will do is to change this reference to an uploaded picture (Image Resource)
Image Resources can be found via the Notes Client under 'Resources\Images' in the navigation pane

Upload a photo of yourself using the 'Import Image Files' Action. When asked to enter select/enter a category click Cancel (you can fix this later)
As a result your image file name will be listed in the view.

Photo's are referenced in a bit a special way. The file name is used as key in the view , so you need to use src="image.gif/$file/image.gif" as reference (for more info see here)

So for my photo the reference becomes: sRc='photo-michiel-mar2012.jpg/$file/photo-michiel-mar2012.jpg'. (Do not forget to also modify the alt-property)

As a result your blog will looks the following in the browser now:

That concludes this step.

Step 3. Remove Name next to the photo
The name next to the foto is the result of the $DXOwner-tag in the 'RightSideBarMH' Template Block

Remove the reference (including surrounding h4-HTML code) and your blog looks like this now

Step 4. Adding an 'About me' link below the photo
In this step an 'about me' content Web page will be created and referred to from the home page
'Web pages' are content pages that are different from Blog postings.
You create Web pages from the Notes Client .

Note:
by default dominoblog.ntf template generates 'weird' reference names for the web pages,

To get identifiable names you need to tune the configuration of the blog:

Open the configuration Document and check the "Auto Populate Page name from Subject" and "add .htm" check boxes on the "Site Settings\Content Creation" tab.

Now, create a web page from the 'Resources\Web pages' view

Save & Post it to have it published. Notice that once you saved it , it gets a decent name in the Web pages view

To add the 'About me' reference to the home page, modify the 'RightSideBar' Template Block with a reference to this page:
The page reference to be used in the HTML code is based on the Page Name (you can copy-out the page name in the web-page document using "show advanced"

The URL-syntax to be used is plain and simple the page name:

Note that I choose to added the same link to the photo-image as well.

In the browser the final result is visible now:

 

more related content might be found via my blog